<template>
  <div class="carUpload">
    <div class="carItem" v-if="step===1">
      <h4>客户资料</h4>
      <ul>
        <li>
          <span>1,</span>
          <p>身份证正反面<span></span></p>
          <div>
            <b>{{uploadList.idCard ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="idCard"  isShort="true"  @upload="upload" prop="idCard"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>2,</span>
          <p>驾驶证<span></span></p>
          <div>
            <b>{{uploadList.drivers_license ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="drivers_license" isShort="true" @upload="upload" prop="drivers_license"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>3,</span>
          <p>半年银行流水原件或复印件盖银行章<span>（具体根据贷款金额、还款能力视情况补充）</span></p>
          <div>
            <b>{{uploadList.bank_water ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="bank_water" isShort="true" @upload="upload" prop="bank_water"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>4,</span>
          <p>房产证明复印件<span>（具体根据贷款金额、还款能力视情况补充）</span></p>
          <div>
            <b>{{uploadList.property ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="property" isShort="true" @upload="upload" prop="property"></Qiniu>
            </i>
          </div>
        </li>
      </ul>
      <div class="isAccept">
        <input type="checkbox" id="accept" hidden v-model="isAccept"><i :class="{'is-checked':isAccept}"></i><label
        for="accept">我接受</label><router-link tag="span" to="uploadpact" style="cursor: pointer;">《居间服务协议、业务确认函、保证金协议书》</router-link>
      </div>
    </div>
    <div class="carItem" v-if="step===2">
      <h4>客户资料</h4>
      <ul>
        <li>
          <span>5,</span>
          <p>征信授权书<span>（人保版本）</span>、手持身份证征信授权书拍照、客户正脸照拍照、征信报告</p>
          <div>
            <b>{{uploadList.credit_reporting ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="credit_reporting" isShort="true" @upload="upload" prop="credit_reporting"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>6,</span>
          <p>长期居住证明<span>（居住证证、租房协议等）</span></p>
          <div>
            <b>{{uploadList.residence_permit ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="residence_permit" isShort="true" @upload="upload" prop="residence_permit"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>7,</span>
          <p>工作单位及职业证明<span></span></p>
          <div>
            <b>{{uploadList.profession_certificate ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="profession_certificate" isShort="true" @upload="upload" prop="profession_certificate"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>8,</span>
          <p>结婚证<span></span></p>
          <div>
            <b>{{uploadList.marriage_certificate ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="marriage_certificate" isShort="true" @upload="upload" prop="marriage_certificate"></Qiniu>
            </i>
          </div>
        </li>
      </ul>
    </div>
    <div class="carItem" v-if="step===3">
      <h4>客户资料</h4>
      <ul>
        <li>
          <span>9,</span>
          <p>担保人（配偶）身份证<span></span></p>
          <div>
            <b>{{uploadList.other_idCard ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="other_idCard" isShort="true" @upload="upload" prop="other_idCard"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>10,</span>
          <p>担保合同<span>（居住证证、租房协议等）</span></p>
          <div>
            <b>{{uploadList.guarantee_contract ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="guarantee_contract" isShort="true" @upload="upload" prop="guarantee_contract"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>11,</span>
          <p>家访照片<span></span></p>
          <div>
            <b>{{uploadList.home_photos ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="home_photos" isShort="true" @upload="upload" prop="home_photos"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>12,</span>
          <p>经常居住地址及联系电话<span>（家庭电话、办公电话、手机号码）</span></p>
          <div>
            <b>{{uploadList.contact_information ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="contact_information" isShort="true" @upload="upload" prop="contact_information"></Qiniu>
            </i>
          </div>
        </li>
      </ul>
    </div>
    <div class="carItem" v-if="step>=4">
      <h4>车辆资料</h4>
      <ul>
        <li>
          <span>1,</span>
          <p>购车合同复印件<span></span></p>
          <div>
            <b>{{uploadList.purchase_contract ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="purchase_contract" isShort="true" @upload="upload" prop="purchase_contract"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>2,</span>
          <p>定金凭证、首付款的银行转账凭证<span>（首付款不得低于购车价的20%）</span>、经销商的收据凭证</p>
          <div>
            <b>{{uploadList.earnest ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="earnest" isShort="true" @upload="upload" prop="earnest"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>3,</span>
          <p>购车发票及完税证明原件<span></span></p>
          <div>
            <b>{{uploadList.car_invoice ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="car_invoice" isShort="true" @upload="upload" prop="car_invoice"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>4,</span>
          <p>银行放款确认书<span>（以银行的流程为准）</span></p>
          <div>
            <b>{{uploadList.bank_confirm ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="bank_confirm" isShort="true" @upload="upload" prop="bank_confirm"></Qiniu>
            </i>
          </div>
        </li>
        <li>
          <span>5,</span>
          <p>车辆合格证或进口车辆证明或关单或随车检验单<span></span></p>
          <div>
            <b>{{uploadList.car_certificate ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="car_certificate" isShort="true" @upload="upload" prop="car_certificate"></Qiniu>
            </i>

          </div>
        </li>
        <li>
          <span>6,</span>
          <p>车辆验车照片：借款人、验车人和抵押车辆的合照、车辆前、后外观；内部前、后座；方向盘或仪表盘<span>（须清晰显示里程数）</span></p>
          <div>
            <b>{{uploadList.car_verification ? '已上传' : ''}}</b>
            <i>
              <Qiniu className="car_verification" isShort="true" @upload="upload" prop="car_verification"></Qiniu>
            </i>
          </div>
        </li>
      </ul>
    </div>
    <button class="btn" @click="next">{{btnContent}}</button>
  </div>
</template>

<script>
  import Qiniu from './../common/Qiniu'
  export default {
    name: "CarUpload",
    data() {
      return {
        btnContent: '下一步',
        isAccept: false,
        step: 1,
        uploadList:{
          idCard:'',
          drivers_license:'',
          bank_water:'',
          property:'',
          credit_reporting:'',
          residence_permit:'',
          profession_certificate:'',
          marriage_certificate:'',
          other_idCard:'',
          guarantee_contract:'',
          home_photos:'',
          contact_information:'',
          purchase_contract:'',
          earnest:'',
          car_invoice:'',
          bank_confirm:'',
          car_certificate:'',
          car_verification:'',
        },
      }
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      if(this.step===1 || this.step>=4){
        next();
      }else {
        if(to.fullPath.indexOf('login')!=-1 ){
          next()
        }else {
          this.step -= 1;
          next(false)
        }
      }
    },
    components: {
      Qiniu
    },
    mounted(){
      let params = this.$route.query;
      this.type = params.type || 'define';
      // if(this.type !== 'define'){
        this.$api.getLoanData({id:params.loanId}).then((res)=>{
          this.uploadList = Object.assign(this.uploadList,res.data);
        })
      // }
    },
    methods: {
      next() {
        if(this.step === 1){
          if(!this.isAccept){
            this.$toast('请先接受协议')
            return;
          }
        }
        this.step += 1;
        if (this.step === 4) {
          this.btnContent = '完成';
        }
        if (this.step > 4) {
          this.$router.push('/homepage')
        }
      },
      upload(value,name){
        console.log('回调upload');
        console.log(value);
        console.log(name);
        this.$api.uploadCarPersonal({[name]:value,loan_id:this.$route.query.loanId}).then(()=>{
          this.uploadList[name] = value;
          this.$toast('上传成功');
        }).catch(()=>{
          this.$toast('上传失败');
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .carUpload {
    width: 100%;
    height: 100%;
    .btn{
      position: absolute;
      left: 30px;
      bottom: 30px;
    }
    .carItem {
      width: 100%;
      h4 {
        font-size: 30px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 30px;
        padding: 36px 30px;
      }

      ul {
        padding: 0 30px;
        background: #fff;

        li {
          min-height: 100px;
          font-size: 30px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 32px;
          border-bottom: 1px solid #F2F2F2;
          overflow: hidden;

          > span {
            float: left;
            margin: 34px 0 0 0;
          }

          p {
            line-height: 46px;
            width: 494px;
            float: left;
            margin: 27px 0;

            > span {
              color: #999999;
            }
          }

          > div {
            float: right;
            margin: 30px 0 0 0;

            b {
              font-size: 22px;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 40px;
              margin: 0 10px 0 0;
            }

            i {
              float: right;
              width: 40px;
              height: 40px;
              background: url("./../../assets/img/personal/bottom.png");
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
  /deep/ .qiniu {
    width: 100%;
    height: 100%;
  }

  /deep/ .qiniu label {
    width: 100%;
    height: 100%;
    font-size: 0;
    background: transparent;
  }

</style>
